import { BetaSchemaForm, ProFormInstance } from "@ant-design/pro-components";
import { Tag } from "antd"
import { useStateFromRedux } from "../../../dragger/reducer";
import { produce } from "immer";
import { useEffect, useRef } from "react";
import { findCardByIndexs } from "../../../dragger/helper";
import { Icon } from '@iconify/react';

type DataItem = {
    name: string;
    state: string;
};

export const Props = () => {
    const formRef = useRef<ProFormInstance>();
    const [selectIndex, setSelectIndex] = useStateFromRedux('selectIndex')
    const [cards, setCards] = useStateFromRedux('cards');

    const schema = findCardByIndexs(cards, selectIndex) || {};
    console.log('schema', schema)

    
    const { props }  = schema?.data || {};

    console.log('props', props)
    
    useEffect(() => {
        if (selectIndex.length > 0) {
            formRef.current && formRef.current.resetFields();
        }
    }, [selectIndex])

    if (!props) return;

    const columns = Object.keys(props).map(key => {
        let valueEnum = props[key].valueEnum;
        // Icon组件需要将图标枚举值转换成图标组件
        if (schema.name === 'Icon' && key === 'icon'){
            valueEnum = props[key].valueEnum.reduce((pv, cv) => ({ ...pv, [cv]: <Icon style={{marginTop: 3}} width={24} height={24} color={'#722ed1'} icon={cv} />  }), {})
        }
        return {
        ...props[key],
        valueEnum,
        dataIndex: key,
    }})
    console.log('columns',columns);

    
    const onChange = (changedFields, allFields) => {
        console.log('args', changedFields, allFields)
        setCards(produce((draft) => {
            changedFields.map(field => {
                let value = field.value;
                // 日期统一转成hex格式
                if (typeof field.value?.toHexString === 'function') {
                    value = field.value.toHexString();
                }

                const card = findCardByIndexs(draft, selectIndex)
                card.data.props[field.name.join('.')].initialValue = value

                if (field.name[0] === 'flexDirection') {
                    card.direction = value;
                    card.childrens.map((item) => {
                        item.direction = value;
                    })
                }
            })
        }))
    }

    

    return <div>
        <Tag style={{marginBottom: 24}} bordered={false} color="purple">
            {schema.title}：{schema.name}
        </Tag>

        <BetaSchemaForm<DataItem>
            formRef={formRef}
            layoutType={'Form'}
            layout='horizontal'
            colProps={{
              span: 24,
            }}
            grid={true}
            onFieldsChange={onChange}
            onChange={(e)=> {
                // console.log('e', e)
                // onChange(e.target.id, e.target.value)
            }}
            onFinish={async (values) => {
              console.log(values);
            }}
            columns={columns}
            submitter={false}
          />
    </div>
}